<template>
	<view class="cardBox">
		<!-- 顶部 -->
		<user-head id="uHead" :bandId="bandId"></user-head>
		<!-- 内容 -->
		<view class="card" :style="pHeight">
			<view class="pd40" v-if="!shopList">
				<u-skeleton rows="3" title loading rowsHeight="30"></u-skeleton>
			</view>
			<view v-else class="pageContent">
				<view class="tap">
					<view>免费配送</view>
					<navigator url="/pages/ucenter/order/list"><view>我的订单</view></navigator>
				</view>
				<view class="scrollList">
					<!-- 搜索 -->
					<view class="seacrch">
						<u-icon name="search" size="18"></u-icon>
						<view class="fs24" @click="topage('/pages/shop/search')">搜索</view>
					</view>
					<!-- 左 -->
					<view class="left">
						<scroll-view scroll-y scroll-with-animation :scroll-top="leftValue" style="height: 100%">
							<view>
								<view v-for="(i, index) in shopList" :key="index" class="row" :class="leftNum == index ? 'active' : ''" @click="leftCk(index)">{{ i.name }}</view>
							</view>
						</scroll-view>
					</view>
					<!-- 右 -->
					<view class="right">
						<scroll-view scroll-y scroll-with-animation :scroll-top="rightValue" @scroll="scrollRight" style="height: 100%">
							<!-- 内容 -->
							<view v-for="i in shopList" class="slist" :key="i">
								<u-sticky :customNavHeight="0" bgColor="#fff" zIndex="10">
									<view class="title">{{ i.name }}</view>
								</u-sticky>
								<view v-for="item in i.child">
									<produce-item :child="item" />
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<!-- 购物车 -->
		<car-buy></car-buy>
		<pro-detail-popup></pro-detail-popup>
		<pro-select-specs></pro-select-specs>
	</view>
</template>

<script setup>
import { computed, onMounted, reactive, ref, watch } from 'vue';
import { sysStore } from '../../stores/shop/system.js';
import { useCounterStore } from '../../stores/shop/car.js';
import { onLoad } from '@dcloudio/uni-app';

// 左侧点击
const leftNum = ref(0);
const leftValue = ref(0);
const rightValue = ref(0);
let timer;
const leftCk = (index) => {
	leftNum.value = index;
	if (timer) {
		clearTimeout(timer);
	}
	timer = setTimeout(() => {
		leftValue.value = leftTop[index];
		rightValue.value = rightTop[index];
	}, 500);
};
// 右侧滑动
// 右侧滑动
const leftTop = reactive([]);
const rightTop = reactive([]);
const getTop = () => {
	const query = uni.createSelectorQuery();
	//头部高度
	let headHeight = 0;
	query
		.selectAll('#uHead')
		.boundingClientRect((res) => {
			headHeight = res[0].height + 40;
		})
		.exec();
	//左侧节点组
	query
		.selectAll('.row')
		.boundingClientRect((res) => {
			res.map((i) => leftTop.push(i.top - headHeight));
		})
		.exec();
	//右侧节点组
	query
		.selectAll('.slist')
		.boundingClientRect((res) => {
			res.map((i) => rightTop.push(Math.floor(i.top - headHeight)));
		})
		.exec();
};

//滑动事件
const topHeight = ref(360);

const scrollRight = (e) => {
	let scHeight = Math.ceil(e.detail.scrollTop);
	let sys = sysStore();
	sys.scrollStatus = scHeight >= 300;
	let index = rightTop.filter((i) => scHeight >= i).length - 1;
	leftValue.value = leftTop[index];
	leftNum.value = index;
	topHeight.value = sys.scrollStatus ? 100 : 350;
};
const pHeight = computed(() => {
	// return {
	//     height: `calc(95vh - ${topHeight.value}rpx )`
	// };
	return {
		height: `calc(95vh - 85rpx )`
	};
});
const topage = (url) => {
	uni.navigateTo({
		url
	});
};

//获取商品数据
const goodsObj = uniCloud.importObject('mall-goods');
const shopList = reactive([]);
const getShopList = async () => {
	let res = await goodsObj.getList(bandId.value);
	res.map((i) => {
		shopList.push(i);
	});
	setnum();
};
const carList = useCounterStore().cardList;
//修改数量
const setnum = () => {
	let flag = carList.length;
	shopList.map((i) => {
		i.child.map((j) => {
			if (!flag) {
				j.shopNum = 0;
			}
			carList.map((item) => {
				if (j._id == item._id) {
					j.shopNum = item.shopNum;
				}
			});
		});
	});
	// console.log(shopList);
};
watch(
	carList,
	() => {
		setnum();
	},
	{ deep: true }
);
const bandId = ref('');
onLoad((e) => {
	bandId.value = e.id;
});
onMounted(async () => {
	await getShopList();
	getTop();
});
</script>

<style lang="scss" scoped>
.cardBox {
	height: 100vh;
	display: flex;
	flex-direction: column;

	.card {
		margin-top: -20rpx;
		border-radius: 30rpx 30rpx 0 0;
		background-color: #fff;
		padding: 25rpx 0;
		z-index: 2;
		position: relative;
		overflow: hidden;
		height: calc(100vh - 300rpx);
		overflow: hidden;
		// box-sizing: border-box;
		// height: calc(95vh - 350rpx);
		// height: calc(95vh - 100rpx);
		.tap {
			height: 60rpx;
			font-size: 28rpx;
			@include flex-box();
			padding: 0 20rpx;
		}
		.pageContent {
			height: 100%;
		}
	}

	.scrollList {
		display: flex;
		justify-content: space-between;
		position: relative;
		border-top: 1px solid #eee;
		height: calc(100% - 60rpx);
		.row {
			padding: 25rpx 18rpx;
			position: relative;
			vertical-align: middle;

			&.active {
				background-color: #eee;

				&::after {
					content: '';
					width: 6rpx;
					height: 30rpx;
					background: $uni-color-primary;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translate(0, -50%);
				}
			}
		}

		.seacrch {
			display: flex;
			position: absolute;
			top: 20rpx;
			right: 10rpx;
			z-index: 50;
		}

		.left {
			width: 200rpx;
			height: 100%;
			overflow-y: scroll;
		}

		.right {
			flex: 1;
			border-left: 1px solid $uni-border-color;
			height: 100%;
			.title {
				display: flex;
				align-items: center;
				margin-left: 20rpx;
				height: 80rpx;
			}
		}
	}
}
</style>
